<!DOCTYPE html>
<html lang="ZH">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="baidu-site-verification" content="codeva-vdRYyce8Zi" />
<!--    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />-->
    <link rel="icon" href="<%= BASE_URL %>logo.png">
    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
    <title>后台聊天系统</title>
    <style>
      /*
* CSS样式表重置初始化样式，PC端
*/   html,body,#app{
        width: 100%;
        height: 100%;
      }
      body,p,div,ul,li,form,input,td,tr,th,div{
        margin: 0;
        padding: 0;
      }
      body{
        position: relative;
      }
      ul,li{
        list-style: none;
      }
      img{
        border: none;
        /* vertical-align: top; */
        display: block;
      }
      a{
        text-decoration: none;
        color: #002be5;
      }
      a:hover{
        text-decoration: none;
      }
      a img{
        border: 0;
      }
      em{
        color: #e50000;
        font-style: normal;
      }
      button{
        cursor: pointer; /*鼠标光标的类型*/
      }
      input,textarea{
        outline: none;
        appearance: none;
      }
      textarea{
        resize: none;
        overflow: auto;
      }
      table{
        border-collapse: collapse;
      }
      em{
        font-style: normal;
      }

      /* 简洁现代 Loading 样式 */
      #initial-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
      }

      .loading-container {
        text-align: center;
      }

      /* 跳跃式加载条 */
      .jumping-bar-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        margin-bottom: 30px;
      }

      .jumping-bar-loader span {
        display: block;
        background: #409EFF;
        width: 8px;
        height: 10%;
        border-radius: 4px;
        margin: 0 4px;
        animation: jumping-bar 1.2s ease-in-out infinite;
      }

      .jumping-bar-loader span:nth-child(1) { animation-delay: 0s; }
      .jumping-bar-loader span:nth-child(2) { animation-delay: 0.2s; }
      .jumping-bar-loader span:nth-child(3) { animation-delay: 0.4s; }
      .jumping-bar-loader span:nth-child(4) { animation-delay: 0.6s; }
      .jumping-bar-loader span:nth-child(5) { animation-delay: 0.8s; }

      @keyframes jumping-bar {
        0%, 100% {
          height: 10%;
        }
        50% {
          height: 100%;
        }
      }

      /* 加载文字 */
      .loading-text {
        color: #333;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 1px;
        margin-bottom: 20px;
      }

      .loading-subtitle {
        color: #666;
        font-size: 14px;
        margin-bottom: 30px;
      }

      /* 进度条 */
      .loading-progress {
        width: 200px;
        height: 4px;
        background: #f0f0f0;
        border-radius: 2px;
        overflow: hidden;
        margin: 0 auto;
      }

      .loading-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #409EFF, #67C23A);
        border-radius: 2px;
        width: 0%;
        transition: width 0.3s ease;
      }


      /* 响应式设计 */
      @media (max-width: 768px) {
        .loading-text {
          font-size: 16px;
        }
        
        .loading-subtitle {
          font-size: 12px;
        }
        
        .loading-progress {
          width: 150px;
        }
      }

      @media (max-width: 480px) {
        .jumping-bar-loader {
          height: 50px;
        }
        
        .jumping-bar-loader span {
          width: 6px;
          margin: 0 3px;
        }
        
        .loading-text {
          font-size: 14px;
        }
        
        .loading-progress {
          width: 120px;
        }
      }



    </style>
      <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?469b8e7d98f12c75e6be0b547061efea";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
        </script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    
    <!-- 简洁现代 Loading 界面 -->
    <div id="initial-loading">
      <div class="loading-container">
        <div class="jumping-bar-loader">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="loading-text">后台聊天系统</div>
        <div class="loading-subtitle">正在加载中，请稍候...</div>
        <div class="loading-progress">
          <div class="loading-progress-bar"></div>
        </div>
      </div>
    </div>
    
    <div id="app"></div>
    <!-- built files will be auto injected -->
    
    <script>
      // 与 NProgress 集成的 Loading 控制
      (function() {
        let loadingElement = document.getElementById('initial-loading');
        let appElement = document.getElementById('app');
        let progress = 0;
        let isComplete = false;
        let nprogressStarted = false;
        
        const progressBar = document.querySelector('.loading-progress-bar');
        const loadingContainer = document.querySelector('.loading-container');
        const loadingText = document.querySelector('.loading-text');
        
        // 监听 NProgress 状态
        const originalNProgressStart = window.NProgress && window.NProgress.start;
        const originalNProgressDone = window.NProgress && window.NProgress.done;
        
        // 重写 NProgress 方法
        if (window.NProgress) {
          window.NProgress.start = function() {
            nprogressStarted = true;
            if (originalNProgressStart) {
              originalNProgressStart.call(this);
            }
          };
          
          window.NProgress.done = function() {
            if (originalNProgressDone) {
              originalNProgressDone.call(this);
            }
            // NProgress 完成后，隐藏我们的 loading
            hideLoading();
          };
        }
        
        // 简洁的进度更新
        const updateProgress = () => {
          if (isComplete) return;
          
          const increment = Math.random() * 8 + 3; // 3-11 的随机增量
          progress += increment;
          
          if (progress > 85) {
            progress = 85; // 保持在85%，等待 NProgress 完成
          }
          
          if (progressBar) {
            progressBar.style.width = progress + '%';
          }
          
          if (progress < 85) {
            setTimeout(updateProgress, 150 + Math.random() * 100);
          }
        };
        
        // 隐藏 loading
        const hideLoading = () => {
          if (isComplete) return;
          isComplete = true;
          
          // 直接隐藏，不显示完成状态
          if (loadingElement) {
            loadingElement.style.opacity = '0';
            setTimeout(() => {
              loadingElement.style.display = 'none';
            }, 300);
          }
        };
        
        // 开始进度更新
        setTimeout(updateProgress, 300);
        
        // 监听 Vue 应用加载完成
        const checkAppReady = () => {
          if (appElement && appElement.children.length > 0) {
            // 应用已加载，但等待 NProgress 完成
            if (nprogressStarted) {
              // NProgress 已开始，等待其完成
              return;
            } else {
              // NProgress 未开始，直接隐藏
              hideLoading();
            }
          } else {
            setTimeout(checkAppReady, 100);
          }
        };
        
        // 开始检查应用状态
        setTimeout(checkAppReady, 800);
        
        // 页面加载完成后的处理
        window.addEventListener('load', () => {
          setTimeout(() => {
            if (!isComplete && !nprogressStarted) {
              hideLoading();
            }
          }, 1000);
        });
        
        // 最大加载时间限制
        setTimeout(() => {
          if (!isComplete) {
            hideLoading();
          }
        }, 4000);
        
      })();
    </script>
  </body>
</html>
